<script setup>
import {updateReport} from "@/apis/report.js";
import {onMounted, ref} from "vue";
import {useUserStore} from "@/stores/userStore.js"

const props = defineProps({
  // 非空对象
  reportMsg: {
    type: Object,
    require: true
  }
})


const formData = props.reportMsg
const rules = {
  goodsName: [
    {required: true, message: '商品名称不能为空', trigger: 'blur'}
  ],
  type: [
    {required: true, message: '举报类型不能为空', trigger: 'blur'}
  ],
  reason: [
    {required: true, message: '举报原因不能为空', trigger: 'blur'}
  ],
  reportResult: [
    {required: true, message: '举报结果不能为空', trigger: 'blur'}]
}
const options01 = ref([
  {value: '0', label: '虚假商品'},
  {value: '1', label: '侵权商品'},
  {value: '3', label: '其他问题'},
]);

// 从父组件获取关闭的方法
const emit = defineEmits(['closeReport'])
const closeReport = () => {
  emit('closeReport')
}
const submitForm = async () => {
  // console.log(useUserStore(userInfo))
  const params01 = {
    id: formData.id,
    // handlerName: userInfo.username,
    // handlerId: userInfo.id,
    reportResult: formData.reportResult,
  };
  await updateReport(params01)
      .then((res) => {
        console.log('111')
        console.log(res)
        if (res.data.code === 1) {
          // 父组件关闭抽屉
          closeReport()
        } else {
          // Handle error
        }
      })
      .catch((error) => {
        console.log(error);
      });
};

const resetForm = () => {
  formData.value.reportResult = '';
};


</script>

<template>
  <el-form :disabled='formData.status===1' :model="formData" :rules="rules" label-width="100px">
    <el-form-item label="商品名称" prop="goodsName">
      <el-input v-model="formData.goodsName" :style="{width: '100%'}" clearable
                readonly></el-input>
    </el-form-item>
    <el-form-item label="举报类型" prop="type">
      <el-select v-model='formData.type' :style="{width: '100%'}" readonly>
        <el-option
            v-for="item in options01"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="举报原因" prop="reason">
      <el-input v-model="formData.reason" :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"
                placeholder="请输入举报原因"
                readonly type="textarea"></el-input>
    </el-form-item>
    <el-form-item label="处理结果" prop="reportResult">
      <el-input v-model="formData.reportResult" :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"
                placeholder="请输入处理结果" type="textarea"></el-input>
    </el-form-item>

    <el-form-item size="large">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>

</style>